<template>
  <div>
    <myheader :img_src="img_src"/>
    {{ userinfo }}
    <br>
    {{ img_src }}
    <h1>用户中心</h1>
    用户名：{{ username }}
    <br>
    手机号：{{ userinfo.mobile | mobilefilter }}
    <br>
    头像展示：

    <van-image
      width="100"
      height="100"
      :src=imgurl
    />

    <br>
    头像上传:
    <van-uploader :after-read="myupload"/>


  </div>
</template>

<script>
import myheader from './myheader.vue'

export default {
  components: {
    'myheader': myheader,

  },
  data() {
    return {
      name: '',
      mobile: '',
      username: localStorage.getItem('username'),
      userid: localStorage.getItem('userid'),
      userinfo: {mobile: ''},
      imgurl: '',
      img_src: ''
    }
  },
  // 手机号只显示三位
  filters: {
    mobilefilter(value) {
      return value.slice(0, 3) + '*****' + value.slice(-3, -1)
    }
  },
  //方法
  methods: {
    getuserinfo() {
      this.$axios.get('/users/getuserinfo/?userid=' + this.userid).then(res => {
        this.userinfo = res.data.list
        this.img_src = this.upload_dir + res.data.list.avater

      })

    },
    myupload(file) {
      console.log(file)
      //往后台发
      let data = new FormData()
      data.append('file', file.file)
      data.append('userid', this.userid)
      this.$axios.post('users/upload/', data).then(res => {
        //展示  this.upload_dir 是在main里边封装的常量 很多地方都会用到
        this.imgurl = this.upload_dir + this.userid + '/' + res.data.filename
      })
    }
  },
  mounted() {
    this.getuserinfo()
  },
}
</script>

<style scoped>

</style>
